<template>
	<div v-loading.fullscreen.lock="loading" class="list column">
		<!-- 功能模块 -->
		<div class="page">
			<span>页面:</span>
			<el-input style="width: 190px" v-model="page" disabled placeholder="Please input" />
		</div>

		<div class="column" style="gap: 10px">
			<div style="font-weight: bold">功能模块</div>
			<draggable class="listflexwrap" :list="list" :group="{ name: 'people', pull: 'clone', put: false }" :clone="cloneDog" item-key="id" :sort="false">
				<template #item="{ element }">
					<div v-if="element.type == 'module'">
						<div class="listbox" :style="{ background: `linear-gradient(120deg, ${element.parameterlist.color1} 0%, ${element.parameterlist.color2} 100%)` }">
							<div style="font-size: 40px" :class="['iconfont', element.parameterlist.icon]"></div>
							<div>{{ element.name }}</div>
						</div>
					</div>
				</template>
			</draggable>
		</div>
		<!-- 静态页面 -->
		<div class="column" style="gap: 10px">
			<div style="font-weight: bold">图文</div>
			<draggable class="listflexwrap" :list="list" :group="{ name: 'people', pull: 'clone', put: false }" :clone="cloneDog" item-key="id" :sort="false">
				<template #item="{ element }">
					<div v-if="element.type == 'Staticpages'">
						<div class="listbox" :style="{ background: `linear-gradient(120deg, ${element.parameterlist.color1} 0%, ${element.parameterlist.color2} 100%)` }">
							<div style="font-size: 40px" :class="['iconfont', element.parameterlist.icon]"></div>
							<div>{{ element.name }}</div>
						</div>
					</div>
				</template>
			</draggable>
		</div>
		<!-- 富文本 -->
		<div class="column" style="gap: 10px">
			<div style="font-weight: bold">富文本</div>
			<draggable class="listflexwrap" :list="list" :group="{ name: 'people', pull: 'clone', put: false }" :clone="cloneDog" item-key="id" :sort="false">
				<template #item="{ element }">
					<div v-if="element.type == 'richtext'">
						<div class="listbox" :style="{ background: `linear-gradient(120deg, ${element.parameterlist.color1} 0%, ${element.parameterlist.color2} 100%)` }">
							<div style="font-size: 40px" :class="['iconfont', element.parameterlist.icon]"></div>
							<div>{{ element.name }}</div>
						</div>
					</div>
				</template>
			</draggable>
		</div>
		<!-- 其他组件 -->
		<div class="column" style="gap: 10px">
			<div style="font-weight: bold">组件</div>
			<draggable class="listflexwrap" :list="list" :group="{ name: 'people', pull: 'clone', put: false }" :clone="cloneDog" item-key="id" :sort="false">
				<template #item="{ element }">
					<div v-if="element.type == 'assembly'">
						<div class="listbox" :style="{ background: `linear-gradient(120deg, ${element.parameterlist.color1} 0%, ${element.parameterlist.color2} 100%)` }">
							<div style="font-size: 40px" :class="['iconfont', element.parameterlist.icon]"></div>
							<div>{{ element.name }}</div>
						</div>
					</div>
				</template>
			</draggable>
		</div>
	</div>
</template>
<script>
	import { v4 as uuidv4 } from 'uuid'
	import { dataRequest as api } from '@/api/api'
	import draggable from 'vuedraggable'
	export default {
		components: { draggable },
		data() {
			return {
				contenten: {
					type: 'doc',
					content: [
						{
							type: 'heading',
							attrs: {
								textAlign: 'left',
								level: 2,
							},
							content: [
								{
									type: 'text',
									marks: [
										{
											type: 'bold',
										},
									],
									text: 'Title: "This is a title "',
								},
							],
						},
						{
							type: 'paragraph',
							attrs: {
								textAlign: 'start',
							},
						},
						{
							type: 'paragraph',
							attrs: {
								textAlign: 'start',
							},
							content: [
								{
									type: 'text',
									text: 'This is a simple text example that can contain variousformats, such as ',
								},
								{
									type: 'text',
									marks: [
										{
											type: 'bold',
										},
									],
									text: 'bold',
								},
								{
									type: 'text',
									text: ', ',
								},
								{
									type: 'text',
									marks: [
										{
											type: 'underline',
										},
									],
									text: 'underline',
								},
							],
						},
						{
							type: 'blockquote',
							content: [
								{
									type: 'paragraph',
									attrs: {
										textAlign: 'start',
									},
									content: [
										{
											type: 'text',
											text: 'Quote ',
										},
									],
								},
							],
						},
					],
				},
				content: {
					type: 'doc',
					content: [
						{
							type: 'heading',
							attrs: {
								textAlign: 'left',
								level: 3,
							},
							content: [
								{
									type: 'text',
									text: '这是一个标题',
								},
							],
						},
						{
							type: 'paragraph',
							attrs: {
								textAlign: 'left',
							},
						},
						{
							type: 'paragraph',
							attrs: {
								textAlign: 'left',
							},
							content: [
								{
									type: 'text',
									text: '这是一个简单的文本示例，不包含图片。',
								},
							],
						},
						{
							type: 'paragraph',
							attrs: {
								textAlign: 'left',
							},
							content: [
								{
									type: 'text',
									text: '这个文本可以包含各种格式，比如',
								},
								{
									type: 'text',
									marks: [
										{
											type: 'bold',
										},
									],
									text: '粗体',
								},
								{
									type: 'text',
									text: '、',
								},
								{
									type: 'text',
									marks: [
										{
											type: 'underline',
										},
									],
									text: '下划线',
								},
							],
						},
						{
							type: 'blockquote',
							content: [
								{
									type: 'paragraph',
									attrs: {
										textAlign: 'left',
									},
									content: [
										{
											type: 'text',
											text: '引用',
										},
									],
								},
							],
						},
					],
				},
				predefineColors: [
					'#ffffff', // --el-color-white
					'#000000', // --el-color-black
					'#13c07e', // --el-color-primary
					'#4ad991', // --el-color-primary-light-3
					'#7edfbf', // --el-color-primary-light-5
					'#a4e6d3', // --el-color-primary-light-7
					'#b7edda', // --el-color-primary-light-8
					'#cbf5e1', // --el-color-primary-light-9
					'#67c23a', // --el-color-success
					'#95d475', // --el-color-success-light-3
					'#b3e19d', // --el-color-success-light-5
					'#d1edc4', // --el-color-success-light-7
					'#e1f3d8', // --el-color-success-light-8
					'#f0f9eb', // --el-color-success-light-9
					'#e6a23c', // --el-color-warning
					'#eebe77', // --el-color-warning-light-3
					'#f3d19e', // --el-color-warning-light-5
					'#f8e3c5', // --el-color-warning-light-7
					'#faecd8', // --el-color-warning-light-8
					'#fdf6ec', // --el-color-warning-light-9
					'#f56c6c', // --el-color-danger
					'#f89898', // --el-color-danger-light-3
					'#fab6b6', // --el-color-danger-light-5
					'#fcd3d3', // --el-color-danger-light-7
					'#fde2e2', // --el-color-danger-light-8
					'#fef0f0', // --el-color-danger-light-9
					'#909399', // --el-color-info
					'#b1b3b8', // --el-color-info-light-3
					'#c8c9cc', // --el-color-info-light-5
					'#dedfe0', // --el-color-info-light-7
					'#e9e9eb', // --el-color-info-light-8
					'#f4f4f5', // --el-color-info-light-9
					'#303133', // --el-text-color-primary
					'#606266', // --el-text-color-regular
					'#909399', // --el-text-color-secondary
					'#a8abb2', // --el-text-color-placeholder
					'#c0c4cc', // --el-text-color-disabled
					'#dcdfe6', // --el-border-color
					'#e4e7ed', // --el-border-color-light
					'#ebeef5', // --el-border-color-lighter
					'#f2f6fc', // --el-border-color-extra-light
					'#d4d7de', // --el-border-color-dark
					'#cdd0d6', // --el-border-color-darker
					'#f0f2f5', // --el-fill-color
					'#f5f7fa', // --el-fill-color-light
					'#fafafa', // --el-fill-color-lighter
					'#fafcff', // --el-fill-color-extra-light
					'#ebedf0', // --el-fill-color-dark
					'#e6e8eb', // --el-fill-color-darker
				],
				page: '',
				//这个就一个默认的
				list: [],
				loading: false,
			}
		},
		methods: {
			// 获取模块列表
			async getdata() {
				this.loading = true
				let arr = await api('Query', 'Websiteparameters', '')
				if (arr.code == 200) {
					let page = this.$route.params.page ? this.$route.params.page : 'index'
					this.list = arr.data.filter((item) => item.page.includes(page))
				}
				this.loading = false
			},
			// 修改添加的元素内容
			cloneDog(id) {
				// 这里需要判断 然后进行添加
				const clonedId = { ...id }
				clonedId.id = uuidv4()
				clonedId.predefineColors = this.predefineColors
				// 这里可以判断修改

				if (clonedId.type == 'Staticpages') {
					if (clonedId.Classification == 'leftpage' || clonedId.Classification == 'rightpage') {
						clonedId.web = {
							img: 'album/7/img_65892021c5b7d.jpg',
							content: { zh: this.content, en: this.contenten },
							background: '#fff',
							Contentbackground: '#fff',
							color: '#303133',
						}
					}
				}
				if (clonedId.type == 'richtext') {
					if (clonedId.Classification == 'richtext') {
						clonedId.web = {
							content: { zh: this.content, en: this.contenten },
							background: '#fff',
							Contentbackground: '#fff',
							color: '#303133',
						}
					}
				}
				if (clonedId.type == 'assembly') {
					if (clonedId.Classification == 'foot') {
						clonedId.web = {
							img: 'album/7/img_65892021c5b7d.jpg',
							content: { zh: this.content, en: this.contenten },
							background: '#fff',
							Contentbackground: '#fff',
							color: '#303133',
							telegram: '',
							tuite: '',
							qq: '',
						}
					}
					if (clonedId.Classification == 'Timeline') {
						clonedId.web = {
							content: [
								{
									zh: {
										title: '2024-04-12 20:46',
										content: this.content,
									},
									status: '0',
									en: {
										title: '2024-04-12 20:46',
										content: this.contenten,
									},
								},
							],
							background: '#fff',
							Contentbackground: '#fff',
							color: '#303133',
						}
					}
					if (clonedId.Classification == 'Collapse') {
						clonedId.web = {
							content: [
								{
									zh: {
										title: '这是一个标题',
										content: this.content,
									},
									en: {
										title: 'This is a title',
										content: this.contenten,
									},
								},
							],
							background: '#fff',
							Contentbackground: '#fff',
							color: '#303133',
						}
					}
				}
				if (clonedId.type == 'module') {
					if (clonedId.Classification == 'swap') {
						clonedId.swap = {
							tokena: null,
							tokenb: null,
							chanid: '',
						}
						clonedId.web = {
							content: { zh: this.content, en: this.contenten },
							background: '#303133',
							Contentbackground: '#303133',
							color: '#ebedf0',
						}
					}
				}
				return clonedId
			},
		},
		mounted() {
			this.getdata()
			if (!this.$route.params.page) {
				this.page = '首页'
			} else {
				this.page = this.$route.params.page
			}
		},
	}
</script>
<style scoped>
	.page {
		display: flex;
		flex-direction: row;
		align-items: center; /* 垂直居中 */
		gap: 5px;
	}
	.listflexwrap {
		display: flex;
		flex-wrap: wrap; /* 启用自动换行 */
		gap: 10px;
	}
	.listbox {
		display: flex;
		flex-direction: column;
		justify-content: center; /* 水平居中 */
		align-items: center; /* 垂直居中 */
		gap: 5px;
		width: 75px;
		height: 75px;
		color: #fff;
		border-radius: 4px;
	}
	.list {
		padding: 15px 15px 0;
		background: #fff;
		gap: 20px;
		width: 275px;
	}
</style>
